<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    body {
      background: #d4bcbc;
    }
    .wraper {
      position: relative;
      top: -30px;
      display: inline-block;
    }
    .cap {
      display: inline-block;
    }
    .cap-top {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
    }
    .cap-main {
      width: 0;
      height: 0;
      border-color: #e53935;
      border-style: solid;
      border-left-width: 60px;
      border-top-width: 30px;
      border-top-color: transparent;
      border-right-color: transparent;
      position: relative;
      left: 30px;
      top: 15px;
      z-index: 5;
    }
    .cap-main::before {
      content: "";
      position: absolute;
      background-color: #e53935;
      width: 65px;
      height: 13px;
      border-radius: 50%;
      transform: rotate(25deg);
      top: -20px;
      left: -63px;
      z-index: 5;
    }
    .cap-bottom {
      width: 95px;
      height: 30px;
      border-radius: 10px;
      background-color: #fff;
      position: absolute;
      top: 45px;
      left: 15px;
      z-index: 5;
    }
    .face {
      width: 100px;
      height: 100px;
      background-color: #f1c4a7;
      border-radius: 50%;
      position: relative;
      top: 20px;
      left: 12px;
      z-index: 4;
    }
    .ears {
      background-color: #ef9a9a;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 73px;
      z-index: 3;
    }
    .ears:nth-child(2) {
      left: 93px;
    }
    .beard {
      background-color: #fff;
      height: 90px;
      width: 90px;
      border-radius: 0 0 0 100%;
      position: relative;
      top: 43px;
      left: -30px;
      z-index: 8;
    }
    .beard::before {
      content: "";
      position: absolute;
      background-color: #fff;
      height: 90px;
      width: 90px;
      border-radius: 50%;
      left: 50px;
    }
    .eyes {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #212121;
      position: absolute;
      top: 30px;
    }
    .eyes:nth-child(1) {
      left: 20px;
    }
    .eyes:nth-child(2) {
      right: 20px;
    }
    .nose {
      width: 30px;
      height: 25px;
      border-radius: 50%;
      background-color: #ef9a9a;
      position: absolute;
      top: 30.5px;
      left: 35.5px;
      z-index: 10;
    }
    .mouth {
      width: 20px;
      height: 11px;
      border-radius: 1px 1px 20px 20px;
      background-color: #212121;
      position: absolute;
      top: 65px;
      left: 40px;
      z-index: 9;
    }
    .body {
      width: 170px;
      height: 170px;
      background-color: #e53935;
      position: absolute;
      left: -25px;
      border-radius: 50%;
      z-index: 3;
    }
    .belt {
      height: 15px;
      width: 100%;
      background-color: #212121;
      position: absolute;
      top: 90px;
      border-radius: 0 0 7px 7px;
    }
    .belt::before {
      content: "";
      position: absolute;
      width: 40px;
      height: 15px;
      left: calc(50% - 20px);
      background-color: #f9ce1d;
    }
    .hand-left {
      position: relative;
      width: 80px;
      height: 30px;
      background-color: #e53935;
      top: 22px;
      left: -67px;
      border-radius: 0 0 0 30px;
    }
    .hand-left::before {
      content: "";
      position: absolute;
      background-color: #e53935;
      height: 70px;
      width: 30px;
      border-radius: 0 0 0 30px;
      top: -40px;
    }
    .hand-left::after {
      content: "";
      position: absolute;
      width: 45px;
      height: 20px;
      background-color: #fff;
      border-radius: 7px;
      top: -50px;
      left: -7px;
    }
    .hand-left div {
      position: relative;
    }
    .hand-left div::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 45px;
      background-color: #f9ce1d;
      border-radius: 45px 45px 0 0;
      top: -80px;
    }
    .hand-left div::after {
      content: "";
      position: absolute;
      width: 25px;
      height: 15px;
      background-color: #f9ce1d;
      transform: rotate(-45deg);
      border-radius: 50%;
      top: -65px;
      left: 18px;
    }
    .hand-right {
      width: 90px;
      height: 40px;
      background-color: #e53935;
      border-radius: 90px;
      position: relative;
      z-index: 10;
      transform: rotate(60deg);
      top: 10px;
      left: 95px;
    }
    .hand-right::before {
      content: "";
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #f9ce1d;
      border-radius: 50%;
      top: -5px;
      left: -10px;
    }
    .hand-right::after {
      content: "";
      position: absolute;
      border-bottom: 25px solid #876e63;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      height: 0;
      width: 7px;
      top: 23px;
      left: 10px;
      transform: rotate(-20deg);
    }
    .bag {
      width: 100px;
      height: 100px;
      background-color: #876e63;
      position: absolute;
      border-radius: 50%;
      top: 120px;
      left: 75px;
      z-index: 2;
    }
    .leg-wraper {
      position: relative;
      top: 70px;
      left: -95px;
    }
    .legs {
      width: 25px;
      height: 40px;
      background-color: #e53935;
      position: relative;
      top: 0;
      left: 0;
    }
    .legs::after {
      content: "";
      position: absolute;
      top: 40px;
      background-color: #212121;
      width: 25px;
      height: 25px;
    }
    .legs::before {
      content: "";
      position: absolute;
      background-color: #212121;
      top: 48px;
      width: 25px;
      height: 17px;
      border-radius: 0 50% 0 0;
    }
    .legs:nth-child(1)::before {
      left: 17px;
    }
    .legs:nth-child(2)::before {
      left: -17px;
      transform: rotateY(180deg);
    }
    .legs:nth-child(1) {
      position: absolute;
      left: 180px;
    }
    .legs:nth-child(2) {
      left: 110px;
    }
  </style>
  <body>
    <div class="wraper">
      <div class="cap">
        <div class="cap-top"></div>
        <div class="cap-main"></div>
        <div class="cap-bottom"></div>
      </div>
      <div class="ears"></div>
      <div class="ears"></div>
      <div class="face">
        <div class="eyes"></div>
        <div class="eyes"></div>
        <div class="nose"></div>
        <div class="beard"></div>
        <div class="mouth"></div>
      </div>
      <div class="bag"></div>
      <div class="body"><div class="belt"></div></div>
      <div class="hand-left"><div></div></div>
      <div class="hand-right"></div>
      <div class="leg-wraper">
        <div class="legs"></div>
        <div class="legs"></div>
      </div>
    </div>
  </body>
</html>
